<template>
	<view class="container f fac fv fpc">
		<view class="tip">输入数字，自动转换成其他进制</view>
		<view class="card">
			<uni-forms ref="baseForm" :modelValue="form" label-position="left">
				<uni-forms-item label="十进制">
					<uni-easyinput type="digit" v-model.trim="form.ten" @input="(val) => convert('ten', val)" @focus="currentFocus = 'ten'" placeholder="请输入" />
				</uni-forms-item>
				<uni-forms-item label="二进制">
					<uni-easyinput type="digit" v-model.trim="form.two" @input="(val) => convert('two', val)" @focus="currentFocus = 'two'" placeholder="请输入" />
				</uni-forms-item>
				<uni-forms-item label="八进制">
					<uni-easyinput type="digit" v-model.trim="form.eight" @input="(val) => convert('eight', val)" @focus="currentFocus = 'eight'" placeholder="请输入" />
				</uni-forms-item>
				<uni-forms-item label="十六进制">
					<uni-easyinput type="digit" v-model.trim="form.sixteen" @input="(val) => convert('sixteen', val)" @focus="currentFocus = 'sixteen'" placeholder="请输入" />
				</uni-forms-item>
			</uni-forms>
			<view v-if="errorMessage" class="error-message">
				{{ errorMessage }}
			</view>
		</view>
	</view>
</template>

<script setup>
import { reactive, ref } from 'vue';

	const form = reactive({
		ten: '',
		two: '',
		eight: '',
		sixteen: ''
	})
	
	// 当前聚焦的输入框
	const currentFocus = ref('')
	// 错误信息
	const errorMessage = ref('')
	
	// 进制转换
	const convert = (from, value) => {
		// 清除之前的错误信息
		errorMessage.value = ''
		// 如果输入为空，清空所有字段
		if (value === '') {
			form.ten = ''
			form.two = ''
			form.eight = ''
			form.sixteen = ''
			return
		}
		// 检查输入是否有效
		if (!isValidInput(from, value)) {
			errorMessage.value = getErrorMessage(from)
			return
		}
		try {
			// 将输入值转换为十进制
			let decimalValue
			switch(from) {
				case 'ten':
					decimalValue = parseInt(value, 10)
					break
				case 'two':
					decimalValue = parseInt(value, 2)
					break
				case 'eight':
					decimalValue = parseInt(value, 8)
					break
				case 'sixteen':
					decimalValue = parseInt(value, 16)
					break
			}
			// 如果转换结果是NaN，说明输入无效
			if (isNaN(decimalValue)) {
				errorMessage.value = '输入的数字无效'
				return
			}
			// 更新所有字段，避免触发重复转换
			form.ten = decimalValue.toString(10)
			form.two = decimalValue.toString(2)
			form.eight = decimalValue.toString(8)
			form.sixteen = decimalValue.toString(16).toUpperCase()
		
		} catch (error) {
			errorMessage.value = '转换失败，请检查输入'
			console.error('进制转换错误:', error)
		}
	}
	
	// 验证输入是否有效
	const isValidInput = (type, value) => {
		const validators = {
			ten: /^[0-9]+$/,
			two: /^[01]+$/,
			eight: /^[0-7]+$/,
			sixteen: /^[0-9A-Fa-f]+$/
		}
		return validators[type].test(value)
	}
	
	// 获取错误提示信息
	const getErrorMessage = (type) => {
		const messages = {
			ten: '十进制只能输入数字0-9',
			two: '二进制只能输入数字0或1',
			eight: '八进制只能输入数字0-7',
			sixteen: '十六进制只能输入数字0-9或字母A-F'
		}
		return messages[type] || '输入格式不正确'
	}
</script>

<style scoped lang="scss">
	.container {
		background-color: #f8f9fa;
		padding: 24rpx;
		height: 100vh;
		.card {
			margin-top: 48rpx;
			width: 100%;
			.error-message {
				width: 100%;
				text-align: center;
				margin-top: 24rpx;
				color: red;
			}
		}
	}
</style>
